<template>
  <div style="display: flex; flex-direction: column">
    <div
      style="
        width: 350px;
        background: blue;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      网络请求
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 300px;
        align-items: center;
        justify-content: center;
        background: black;
        color:white;
      "
    >
    <div style="display: flex; align-items: center;height:30px;">
        <div style="width: 80px">延时</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden;height:20px;"  >{{delay}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 80px">IP地址</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden;height:20px;">{{ipAddress}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">端口号</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden;height:20px;"  >{{port}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">指令数据</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden;height:20px;"
       
        >{{instructionData}}</div>
      </div>
      <div v-if="eventType == 2" style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">请求路径</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden;height:20px;"
       
        >{{requestPath}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">类型</div>
        <select disabled style="width: 115px" v-model="eventType">
          <option value="0">TCP</option>
          <option value="1">UDP</option>
          <option value="2">HTTP</option>
        </select>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px"></div>
        <select disabled style="width: 115px" v-model="sonEventType">
          <option
            :value="index"
            v-for="(item, index) in sonEventTypeArr"
            :key="index"
          >
            {{ item }}
          </option>
        </select>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">16进制</div>
         
            <input type="checkbox" disabled :value="true" v-model="hexadecimal">
           
       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NetWorkComponent",
  inject: ["getNode"],
  data() {
    return {
      ipAddress: null,
      port: null,
      instructionData: null,
      sonEventTypeArr: [],
      requestPath:null,
      eventType: null,
      sonEventType: null,
      hexadecimal:false,
      delay:0
    };
  },
  methods: {},
  watch: {
    eventType(newValue) {
      console.log(newValue);
      switch (newValue) {
        case '0':
          this.sonEventTypeArr = [];
          break;
        case '1':
          this.sonEventTypeArr = ["单播", "组播", "广播"];
          break;
        case '2':
          this.sonEventTypeArr = ["GET", "POST"];
          break;

        default:
          break;
      }
      console.log(this.sonEventTypeArr);
    },
  },
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      
      if (current === undefined) {
        self.ipAddress = null;
        self.port = null;
        self.instructionData = null;
        self.eventType = null;
        self.sonEventType = null;
        self.requestPath = null;
        self.hexadecimal = false;
        self.delay = 0;
        return;
      }
      self.ipAddress = current.ipAddress;
      self.port = current.port;
      self.instructionData = current.instructionData;
      self.eventType = current.eventType;
      self.sonEventType = current.sonEventType;
      self.requestPath = current.requestPath;
      self.hexadecimal = current.hexadecimal;
      self.delay = current.delay
    });
  },
};
</script>

<style>
</style>